<template>
	<div class="content">
		<div class="form_login w-400px">
			<div m-10>
				<h1 class="font-size-30px m-b-10px">欢迎登录</h1>
				<el-form class="login_form" :model="loginForm" :rules="rules" ref="loginForms">
					<el-form-item>
						<el-input :prefix-icon="User" v-model="loginForm.username"></el-input>
					</el-form-item>
					<el-form-item>
						<el-input
							type="password"
							:prefix-icon="Lock"
							v-model="loginForm.password"
							show-password
						></el-input>
					</el-form-item>
					<el-form-item>
						<el-button
							style="width: 100%"
							:loading="loading"
							class="login_btn"
							type="primary"
							@click="login"
						>
							登录
						</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { User, Lock } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
//引入获取当前时间的函数
import { getTime } from "@/utils/time";
//引入用户相关的小仓库
import { useUserStore } from "@/store";
const userStore = useUserStore();

let $router = useRouter();
let $route = useRoute();
//定义变量控制按钮加载效果
let loading = ref(false);
//收集账号与密码的数据
let loginForm = reactive({
	username: "admin",
	password: "123456",
});

//登录按钮回调
let loginForms = ref();
const login = async () => {
	//保证全部表单相校验通过再发请求
	await loginForms.value.validate();
	//加载效果:开始加载
	loading.value = true;
	//点击登录按钮以后干什么?
	//通知仓库发登录请求
	//请求成功->首页展示数据的地方
	//请求失败->弹出登录失败信息
	try {
		//保证登录成功
		await userStore.storeUserLogin(loginForm);

		//编程式导航跳转到展示数据首页
		//判断登录的时候,路由路径当中是否有query参数，如果有就往query参数挑战，没有跳转到首页
		let redirect: any = $route.query.redirect;
		$router.push({ path: redirect || "/" });
		//登录成功提示信息
		ElNotification({
			type: "success",
			message: "欢迎回来",
			title: `HI,${getTime()}好`,
		});
		//登录成功加载效果也消失
		loading.value = false;
	} catch (error) {
		console.log(error);

		//登录失败加载效果消息
		loading.value = false;
		//登录失败的提示信息
		// ElNotification({
		//   type: 'error',
		//   message: (error as Error).message,
		// })
	}
};
//自定义校验规则函数
const validatorUserName = (rule: any, value: any, callback: any) => {
	if (value.length >= 5) {
		callback();
	} else {
		callback(new Error("账号长度至少五位"));
	}
};

const validatorPassword = (rule: any, value: any, callback: any) => {
	if (value.length >= 6) {
		callback();
	} else {
		callback(new Error("密码长度至少六位"));
	}
};

//定义表单校验需要配置对象
const rules = {
	username: [
		// { required: true, min: 6, max: 10, message: '账号长度至少六位', trigger: 'change' }
		{ trigger: "change", validator: validatorUserName },
	],
	password: [
		// { required: true, min: 6, max: 15, message: '密码长度至少6位', trigger: 'change' }
		{ trigger: "change", validator: validatorPassword },
	],
};
</script>
<style scoped lang="scss">
.content {
	position: fixed;
	inset: 0;
	background: url("../../assets/images/reg_bg_min.jpg") no-repeat center / cover;
	background-size: cover;
	.form_login {
		position: absolute;
		top: 50%;
		right: 139px;
		background-color: #ffffff;
		border-radius: 10px;
		transform: translateY(-50%);
	}
	.registry {
		width: 400px;
		height: 50px;
		border-radius: 25px;
	}
	.el-button.is-disabled {
		background: #bdcefc;
		border: none;
	}
}
</style>
